import React, { useEffect } from 'react'
import { Button, Form, Input, Card, message } from 'antd';
import style from '../index.module.css'
import { useNavigate, useParams } from 'react-router-dom';

import {
  getHosSetFromIDRequest,
  addHosSetRequest,
  updateHosSetRequest
} from "@api/hospital/hospitalSet"

import type {
  addHosSetParamsType
}from "@api/hospital/model/hospitalSetTypes"



export default function AddOrUpdateHosSet() {
  const navigate = useNavigate()

  const [from] = Form.useForm()

  //拿到当前路由的id
  const {id} = useParams()
  
  
  useEffect(() => {
    //判断有没有id 有id发送请求获取数据添加到表单中
    if(id){
      const getHosSetFrom = async () => {
        const re = await getHosSetFromIDRequest(id)

        from.setFieldsValue(re);
      }
      getHosSetFrom()
    }

  },[])


  //1.点击保存的回调函数
  const addHosSetHandle = async (finishValue:addHosSetParamsType) => {
    if(id){
      //如果有id就修改
      await updateHosSetRequest({
        ...finishValue,
        id
      })

      //修改成功提示
      message.success("修改成功!")

    }else{
      //如果每有id就添加
      await addHosSetRequest(finishValue)

      //修改成功提示
      message.success("添加成功!")
    }

    navigate("/syt/hospital/hospitalSet")
  }

  //2.点击返回的回调函数
  const goBackHandle = () => {
    navigate(-1)
  }
  

  return (
    <Card>
      <Form
        form={from}
        name="basic"
        labelCol={{ span: 2 }}     //表单的label的宽度
        wrapperCol={{ span: 20 }}  //表单的input的宽度
        onFinish = {addHosSetHandle}
      >
        <Form.Item
          label="医院名称"
          name="hosname"
          rules={[{
            required: true, //必填项
            message: "请输入医院名称", //提示
            //把输入的字段改变后返回
            transform(value) {
              return value.trim()
            },
          }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="医院编号"
          name="hoscode"
          rules={[{
            required: true, //必填项
            message: "请输入医院名称", //提示
            //把输入的字段改变后返回
            transform(value) {
              return value.trim()
            },
          }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="api基础路径"
          name="apiUrl"
          rules={[{
            required: true, //必填项
            message: "请输入医院名称", //提示
            //把输入的字段改变后返回
            transform(value) {
              return value.trim()
            },
          }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="联系人姓名"
          name="contactsName"
          rules={[{
            required: true, //必填项
            message: "请输入医院名称", //提示
            //把输入的字段改变后返回
            transform(value) {
              return value.trim()
            },
          }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="联系人手机"
          name="contactsPhone"
          rules={[{
            required: true, //必填项
            message: "请输入医院名称", //提示
            //把输入的字段改变后返回
            transform(value) {
              return value.trim()
            },
          }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          wrapperCol={{ offset: 2 }}
        >
          <Button type="primary" htmlType="submit" className={style.mr}>
            提交
          </Button>
          {/* 点击返回的函数 */}
          <Button type="default" htmlType="button" onClick = {goBackHandle}>
            返回
          </Button>
        </Form.Item>

      </Form>
    </Card>
  )
}

